<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="编辑昵称"
      left-text="取消"
      right-text="确定"
      @click-left="$emit('closePop', false)"
      @click-right="doEdit"
    />

    <van-field
      v-model="uName"
      rows="2"
      autosize
      type="textarea"
      maxlength="20"
      placeholder="请输入新昵称"
      show-word-limit
    />
  </div>
</template>

<script>
import { editUser } from '@/api/user'
export default {
  name: 'updateName',
  props: {
    userInfo: {
      required: true,
      type: Object
    }
  },

  data () {
    return {
      uName: this.userInfo.name
    }
  },

  mounted () {},

  methods: {
    // 执行修改
    async doEdit () {
      try {
        await editUser({ name: this.uName })
        this.$toast.success('修改成功')
        this.$emit('closePop', false)
        // 修改父组件的名字
        // eslint-disable-next-line vue/no-mutating-props
        this.userInfo.name = this.uName
      } catch (error) {
        this.$toast.fail('修改失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #0094ff;
  .van-nav-bar__text {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
</style>
